<template>
  <div style="background-color: white">


    <!-- <div :class="dialogShow?'not-allow-rool':''"> -->
    <div class="shade" v-show="dialogShow" @click="toggle" @touchmove.prevent @scroll.prevent></div>
    <div class="content-container">
      <div class="content-card" v-for="(item,index) in fromData" :key="index">
        <div class="card-top">
          <div class="title-bar">
            <div class="icon iconfont icon-wenjian"></div>
            <div class="title" v-text="item.contactName"></div>
          </div>
          <div class="check">{{item.bpmStatus==1?'乙方签字':item.bpmStatus==2?'待审核':item.bpmStatus==3?'已审核':'请重新审批'}}</div>
        </div>
        <div class="card-middle">
          <div class="contact" v-text="'乙方姓名：' + item.tenant"></div>
          <div class="phone" v-text="'联系方式：'+item.contactPhone"></div>
          <span class="price">租金：</span>
          <span class="value" v-text="'￥'+item.rentStandard+'元/月'"></span>
          <div class="time-text" v-text="'时间：' +item.contactDate"></div>
        </div>
        <div class="card-bottom">
          <button class="signature" @click="sighGo(item.pkManagement)">签名</button>
        </div>
      </div>
    </div>
    <div class="dialog-container">
      <transition name="dialog">
        <div v-show="dialogShow" class="dialog">
          <div
            v-for="(item,index) in options"
            :id="'option'+index"
            class="item"
            :key="index"
            @click="clickOption(item.text,item.value)"
          >
            <div :class="'icon iconfont '+item.icon"></div>
            <div class="text">{{item.text}}</div>
          </div>
        </div>
      </transition>
      <div class="circle iconfont icon-jiahao" @click="toggle"></div>
    </div>
    <div v-show="fromData.length>=10">
      <div v-if="showLoadingMore"
           :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
        <a-spin v-if="loadingMore"/>
        <a-button v-else @click="onLoadMore">更多</a-button>
      </div>
    </div>


  </div>
  <!--<a-list
    class="demo-loadmore-list"
    :loading="loading"
    itemLayout="horizontal"
    :dataSource="fromData"
  >
    <div v-if="showLoadingMore" slot="loadMore"
         :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
      <a-spin v-if="loadingMore"/>
      <a-button v-else @click="onLoadMore">加载更多</a-button>
    </div>
    <a-list-item slot="renderItem" slot-scope="item, index">
      <a-list-item-meta
        :description="item.bpmStatus == 0?'未审核':'已审核'"
      >
        <a slot="title" :href="word + item.pkManagement+'?token='+ getToken">{{item.contactName}} 合同</a>
        <a-avatar slot="avatar" src="@/assets/phone/icon/contract.png"/>
      </a-list-item-meta>
      <div style="display: flex ; flex-direction: column">
        <div>乙方联系人:{{item.tenant}}</div>
        <div>联系方式: {{item.contactPhone}}</div>
        <div>金额: {{item.rentStandard}}/月</div>
      </div>
    </a-list-item>
  </a-list>
</div>-->
</template>

<script>

    import * as mint from 'mint-ui';
    import {deleteAction, getAction, downFile, postAction} from '@/api/manage'
    import Vue from 'vue'
    import {ACCESS_TOKEN} from "@/store/mutation-types"

    const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo'
    export default {
        name: "list",
        components: {
            ...mint,
        },
        methods: {
            back() {
                window.history.go(-1);
            },
            searchData() {

            },
            onLoadMore() {
                this.pageNo++;
                this.loadingMore = true
                getAction(this.url.list, {pageNo: this.pageNo, pageSize: this.pageSize}).then((res) => {
                    this.fromData = this.fromData.concat(res.result.records);
                    this.loadingMore = false
                    this.$nextTick(() => {
                        window.dispatchEvent(new Event('resize'))
                    })
                })
            },
            clickOption(name,value) {
                let json = {name: name, value: value}
               this.$router.push({path:'/phone/contractManagement',query:{row:json}})
            },
            toggle() {
                this.dialogShow = !this.dialogShow
            },
            sighGo(ids){
                console.log(ids + "看下id")
               this.$router.push({path:'/phone/contractManagement/sigh',query:{id:ids}});
            }
        },
        mounted() {
            getAction(this.url.list, this.fromData).then((res) => {
                this.loading = false;
                if (res.success) {
                    this.fromData = res.result.records;
                    console.log(this.fromData);
                }

            })
            document.body.addEventListener('touchmove', function (e) {
                e.preventDefault();
            }, {passive: !this.dialogShow});
            document.body.addEventListener('scroll', function (e) {
                e.preventDefault();
            }, {passive: !this.dialogShow});

        }, data() {
            return {
                options: [
                    {text: '订金协议', value: '1'}, {text: '公寓租房', value: '2'}, {text: '整租房', value: '3'}
                ],
                contents: [
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    },
                    {
                        pictureUrl: '/logo.png',
                        title: '合同合同',
                        content: '测试内容测试内容',
                        contact: '李小姐',
                        phone: '18000000000'
                    }],
                dialogShow: false,
                scrollTop: 0,
                value: '',
                pageNo: 1,
                pageSize: 10,
                loading: true,
                loadingMore: false,
                showLoadingMore: true,
                fromData: [],
                token: '',
                url: {
                    list: '/phone/contractManagement/list',
                    word: 'phone/contractManagement/exportWord/'
                },
            }
        },
        computed: {
            word: function () {
                return `${window._CONFIG['domianURL']}/${this.url.word}`;
            },
            getToken() {
                return this.token = Vue.ls.get(ACCESS_TOKEN);
            },
            filterResult() {
                return this.fromData.filter(value => new RegExp(this.value, 'i').test(value));
            }

        }

    }
</script>

<style scoped>
  @import '~@/assets/phone/iconfont/iconfont.css';
  .dialog-container {
    z-index: 999;
    position: fixed;
    bottom: 50px;
    right: 10px;
    width: 170px;
  }
  .circle {
    font-size: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background-color: #e88;
    margin: 20px 0 0 50%;
    box-shadow: 2px 2px 4px rgba(30, 30, 30, 0.4);
  }

  .circle:active {
    bottom: 46px;
    width: 47px;
    height: 47px;
    font-size: 28px;
    box-shadow: 0px 0px 8px transparent;
  }

  .dialog {
    width: 170px;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 2px 2px 4px rgba(30, 30, 30, 0.4);
    position: relative;
    bottom: 0px;
    right: 0px;
    padding: 10px 0;
  }

  .dialog .item {
    display: flex;
    align-items: center;
    height: 40px;
  }
  .dialog .icon {
    margin: 0 20px;
  }
  .dialog::after {
    content: '';
    border-width: 10px;
    border-style: solid;
    border-color: #fff #fff transparent transparent;
    position: absolute;
    transform: rotate(135deg);
    right: 50px;
    /* bottom: -30px; */
    box-shadow: 2px -2px 3px rgba(30, 30, 30, 0.2);
  }

  .item:active {
    background-color: skyblue;
    color: #fff;
  }

  .dialog-enter-active,
  .dialog-leave-active {
    transition: all 0.5s;
  }
  .dialog-enter,
  .dialog-leave-to {
    transform: scale(0.3);
    right: -15px;
    bottom: -70px;
    opacity: 0;
  }

  .content-card {
    /* height: 180px; */
    /* padding: 10px 20px; */
    border-bottom: 3px solid #eee;
    overflow: hidden;
  }

  .content-card .card-top {
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
  }

  .content-card .icon {
    color: #68c;
    font-size: 18px;
  }

  .content-card .title-bar {
    height: 100%;
    width: 30vw;
    display: flex;
    font-size: 18px;
    font-weight: 600;
    justify-content: space-around;
    align-items: center;
  }

  .content-card .check {
    font-weight: 600;
    font-size: 15px;
    color: #e88;
  }

  .content-card .value {
    font-weight: 600;
    color: #e88;
  }

  .content-card .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content-card .card-middle {
    padding: 10px;
    font-size: 15px;
    border-bottom: 1px solid #eee;
  }

  .content-card .signature {
    height:30px;
    width: 100px;
    background-color: #68c;
    margin: 6px 20px 6px 0;
    box-shadow: 0px 0px 6px rgba(30, 30, 30, 0.6);
    color: #fff;
    text-align: center;
    line-height: 26px;
    border-radius: 10px;
    float: right;
    border: 0;
    outline: none;
  }

  .content-card .signature:active {
    box-shadow: 0px 0px 0px transparent;
  }


  .shade {
    z-index: 10;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.4);
  }

</style>